<template>
	<div class="inviterMsg">
		<inviter-search @conditions="getConditions" />

		<!-- 表格 -->
		<div class="table_box">
			<el-table :data="tableData" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" border style="width: 100%;">
				<el-table-column prop="merchName" label="商户名称" />
				<el-table-column prop="merchPhone" label="联系电话" />
				<el-table-column prop="address" label="商户总部地址" />
				<el-table-column prop="stakeValue" label="出资方">
					<template slot="header" slot-scope="scope">
						<span>出资方</span>
						<el-tooltip popper-class="el-tooltip-theme-fresh" placement="top" effect="light">
							<div slot="content">出资方指优惠折扣或活动优惠的钱由谁承担</div>
							<i class="el-icon-question" />
						</el-tooltip>
					</template>
					<template slot-scope="scope">
						<p>
							{{ scope.row.stakeValue }}
							<span v-if="scope.row.stakeValue == '本商户'">{{ scope.row.needAgree }}</span>
						</p>
					</template>
				</el-table-column>
				<el-table-column prop="discount" label="优惠折扣" />
				<el-table-column prop="commission" label="抽佣比例" />
				<el-table-column>
					<template slot="header" slot-scope="scope">
						<span>积分抵扣比例</span>
						<el-tooltip popper-class="el-tooltip-theme-fresh" placement="top" effect="light">
							<div slot="content">指用户可使用积分抵扣金额比例，抵扣的钱邀请商户补贴给合作商户</div>
							<i class="el-icon-question" />
						</el-tooltip>
					</template>
					<template slot-scope="scope">
						<p>{{ scope.row.integralProportion }} %</p>
					</template>
				</el-table-column>
				<el-table-column prop="time" label="邀请时间" />
				<el-table-column prop="status" label="参与状态">
					<template slot-scope="scope">
						<div>{{ scope.row.statusTxt }}</div>
						<div v-if="scope.row.financingParty == 1 && !scope.row.needAgree" style="color: red;">【系统自动同意】</div>
						<div v-if="scope.row.status == 3" style="color: red;">【插件到期，系统拒绝】</div>
					</template>
				</el-table-column>
				<el-table-column prop="cooperation" label="是否有合作记录" />
				<el-table-column prop="coopStatus" label="关联状态">
					<template slot-scope="scope">
						<div v-if="scope.row.status == 1">{{ scope.row.coopStatus }}</div>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<pag-ination :page-total="pagTotal" @pageNum="getPageNum" @pageSize="getPageSize" />
	</div>
</template>

<script>
import { inviteRecord } from '@/api/business';
import inviterSearch from '../../components/inviterSearch/index.vue';
import pagInation from '../../components/pagInation/index.vue';
export default {
	components: {
		'inviter-search': inviterSearch,
		'pag-ination': pagInation
	},
	data() {
		return {
			/* 查询 */
			conditions: {
				businessName: '',
				mobile: '',
				status: '',
				pageNum: 1,
				pageSize: 10
			},
			pagTotal: null,

			/* 表格 */
			tableData: [
				{
					merchName: '商家 1',
					merchPhone: '18924578589',
					address: '上海市普陀区金沙江路',
					// 出资方
					stake: [
						{
							value: '0',
							label: '请选择出资方'
						},
						{
							value: '1',
							label: '本商户'
						},
						{
							value: '2',
							label: '合作商户'
						}
					],
					stakeValue: '',
					discount: '9折',
					commission: '5%',
					integralAwar: 12,
					integralProportion: 13,
					time: '2022-02-08 12:22:21',
					status: '待同意',
					cooperation: '是',
					coopStatus: '待运营创建补贴账号' //已创建补贴账号
				}
			]
		};
	},
	mounted() {
		this.invitedMsgFun();
	},
	methods: {
		/* 查询条件 */
		getConditions(conditions) {
			const { merchName, merchPhone, stakeValue, statusOptionsValue } = conditions;
			const conditionsVal = {
				businessName: merchName,
				mobile: merchPhone,
				pageNum: 1,
				pageSize: this.conditions.pageSize,
				financingParty: stakeValue, //出资方：1 邀请者(本商户)、2 参与者（合作商户）
				status: statusOptionsValue // 0:待同意, 1:已同意, 2: 已拒绝
			};
			this.conditions = conditionsVal;
			console.log('查询条件', this.conditions);
			this.invitedMsgFun();
		},
		// 获取分页
		getPageNum(val) {
			this.conditions.pageNum = val;
			this.invitedMsgFun();
		},
		getPageSize(val) {
			this.conditions.pageSize = val;
			this.invitedMsgFun();
		},

		/* 邀请记录 */
		invitedMsgFun() {
			inviteRecord(this.conditions).then(res => {
				console.log('邀请记录', res);
				if (res.code == 0) {
					this.pagTotal = res.data.total;
					const data = res.data.list;
					const tableData = [];
					data.forEach(el => {
						const dataItem = {
							merchName: el.joinBusinessName,
							merchPhone: el.joinMobilePhone,
							address: el.joinAddress,
							stakeValue: el.financingParty == 1 ? '本商户' : '合作商户',
							needAgree: el.needAgree ? '（需要同意）' : '（不需要同意）',
							discount: el.discount + '折',
							commission: el.rakeRate + '%',
							// integralAwar: '1',
							integralProportion: el.deductionRatio,
							time: el.inviteTime,
							statusTxt: el.status == 0 ? '待同意' : el.status == 1 ? '已同意' : '已拒绝',
							status: el.status,
							cooperation: el.isCooperate == 0 ? '否' : '是',
							coopStatus:el.relationStatus==4?'补贴账户已解绑':(el.relationStatus != 2 ? '待运营创建补贴账号' : '已创建补贴账号') //已创建补贴账号
						};
						tableData.push(dataItem);
					});
					this.tableData = tableData;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.inviterMsg {
	.table_box {
		width: 100%;
		overflow: hidden;
		padding: 20px;
		background-color: white;
	}
}
</style>
